<template>
	<!-- 头部 -->
	<van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="proxy.$router.back()" fixed placeholder>
		<template #right>
			<van-icon name="share-o" size="18" @click="showShare = true" />
		</template>
	</van-nav-bar>

	<!-- 分享面板 -->
	<van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

	<!-- 轮播图 -->
	<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-if="info">
		<van-swipe-item v-for="item in info.thumbs_text" :key="item">
			<van-image width="100%" :src="item" fit="cover" />
		</van-swipe-item>
	</van-swipe>

	<!-- 商品信息 -->
	<div class="detail" v-if="info">
		<h2 class="name">{{ info.name }}</h2>
		<div>
			<span class="price"><span>￥</span>{{ info.price }}</span>
			<span class="stock">库存：{{ info.stock }} {{ info.unit ? info.unit.name : '' }}</span>
		</div>
	</div>
	<van-loading v-else size="24px" vertical style="margin-top: 20px;">加载中...</van-loading>

	<van-divider v-if="info">宝贝详情</van-divider>

	<div class="introduction" v-if="info" v-html="info.content"></div>

	<van-divider v-if="info">到底了</van-divider>

	<van-action-bar>
		<van-action-bar-icon icon="chat-o" text="客服" @click="contact" />
		<van-action-bar-icon icon="cart-o" text="购物车" :badge="cartCount" @click="goCart" />
		<van-action-bar-button type="warning" text="加入购物车" @click="addCart" />
		<van-action-bar-button type="danger" text="立即购买" @click="buyNow" />
	</van-action-bar>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const proid = ref(proxy.$route.query.proid ?? 0);
const info = ref(null);
const business = proxy.$cookies.get('business');
const isLogin = business && Object.getOwnPropertyNames(business).length > 0;
const _cartCount = ref(null);

const cartCount = computed(() => {
	if (!isLogin) {
		return '';
	}

	if (typeof _cartCount.value === 'number') {
		return _cartCount.value;
	}

	return '';
});

const showShare = ref(false);
const options = [
	[
		{ name: '微信', icon: 'wechat' },
		{ name: '朋友圈', icon: 'wechat-moments' },
		{ name: '微博', icon: 'weibo' },
		{ name: 'QQ', icon: 'qq' },
	],
	[
		{ name: '复制链接', icon: 'link' },
		{ name: '分享海报', icon: 'poster' },
		{ name: '二维码', icon: 'qrcode' },
		{ name: '小程序码', icon: 'weapp-qrcode' },
	],
];

// 获取数据
const getData = async () => {
	const res = await proxy.$GET({
		url: '/index/product',
		params: { proid: proid.value },
	});

	if (res.code === 0) {
		proxy.$fail(res.msg);
	}

	info.value = res.data;

	console.log(res);
};
// 选择分享结果
const onSelect = (obj) => {
	console.log(obj);
};
// 获取购物车数量
const getCartCount = async () => {
	if (!isLogin) return;

	const res = await proxy.$GET({
		url: '/index/cartCount',
		params: { busid: business.id },
	});

	_cartCount.value = res.data ?? 0;

	console.log(res);
};
// 前往购物车
const goCart = () => {
	if (!isLogin) {
		proxy.$message('请先登录');
		return;
	}

	proxy.$router.push('/cart');
};
// 加入购物车
const addCart = async () => {
	if (!isLogin) {
		proxy.$message('请先登录');
		return;
	}

	const res = await proxy.$POST({
		url: '/cart/add',
		params: { busid: business.id, proid: proid.value },
	});

	console.log(res);

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return;
	}

	proxy.$success('添加成功');

	getCartCount();

	// proxy
	// 	.$confirm({
	// 		title: '添加成功',
	// 		message: '是否跳转到购物车进行结算',
	// 	})
	// 	.then(() => {
	// 		proxy.$router.push('/cart/index');
	// 	})
	// 	.catch((err) => {});
};
// 打电话
const contact = async () => {
	proxy
		.$confirm({
			title: '提醒',
			message: '是否拨打客服热线：40012345678',
		})
		.then(() => {
			location.href = `tel:40012345678`;
		})
		.catch(() => {});
};
// 立即购买
const buyNow = async () => {
	if (!isLogin) {
		proxy.$message('请先登录');
		return;
	}

	const res = await proxy.$POST({
		url: '/order/purchase',
		params: { busid: business.id, proid: proid.value },
	});

	console.log(res);

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return;
	}

	proxy.$router.push({
		path: '/cart/confirm',
		query: {
			ids: [res.data.id]
		}
	});
};

getData();
getCartCount();
</script>

<style scoped lang="scss">
.detail {
	padding: 20px 10px;
	background-color: #fff;
	.name {
		margin-bottom: 10px;
		padding-left: 4px;
	}
	& > div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.price {
			color: #fe7923;
			font-size: 20px;
			font-weight: 700px;
			span {
				font-size: 14px;
			}
		}
		.stock {
			color: #95a5a6;
			font-weight: 700;
		}
	}
}
.introduction {
	background-color: #fff;
	max-width: 100%;
	padding-bottom: 60px;
}
</style>
